<template>
    <div class="pay">
        <div class="top">
            <div class="left">
                <span>订单提交成功，请尽快付款！订单号:</span>
                <b style="color:red;">
                    <!-- {{ detail?.order_id }} -->
                    {{ orderDetail?.order_id }}

                </b>
            </div>
            <div class="total_fee">
                应付金额
                <b style="color:red;font-size:20px">
                    {{ orderDetail?.total_fee }}
                </b>
                元
            </div>
        </div>
        <div class="payment">
            <div class="title">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wechat_pay">
                    </use>
                </svg>
                <b>微信支付</b>
                <span>请使用微信扫码支付</span>
            </div>
            <div class="main">
                <div class="left">
                    <div class="qrcode" v-loading="qrLoading">
                        <!-- 展示二维码的地方 -->
                        <img :src="payUrl" width="300" height="300" alt="">
                        <div class="pw-box-ft">
                            <div class="svg">
                                <svg class="icon" aria-hidden="true">
                                    <use xlink:href="#icon-weixin"></use>
                                </svg>
                            </div>
                            <div class="qr-right">
                                <p>请使用微信扫一扫</p>
                                <p>扫描二维码支付</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="right">

                </div>
            </div>
            <el-descriptions title="订单信息">
                <el-descriptions-item label="创建时间">{{ orderDetail?.create_time }}</el-descriptions-item>
                <el-descriptions-item label="用户名">{{ orderDetail?.user_nickname }}</el-descriptions-item>
                <el-descriptions-item label="手机号">{{ orderDetail?.user_phone }}</el-descriptions-item>
                <el-descriptions-item label="产品名称">{{ orderDetail?.orderDetail[0].productName }}</el-descriptions-item>
                <el-descriptions-item label="产品描述">{{ orderDetail?.orderDetail[0].description }}</el-descriptions-item>
                <el-descriptions-item label="收件地址">{{ orderDetail?.address }}</el-descriptions-item>
            </el-descriptions>
        </div>
    </div>

</template>

<script>
//首先要获取订单id
import { mapState } from "vuex";
//引入生成二维码插件
import qr from "qrcode";
//引入获取订单和支付的方法
import * as api from "@/api/pay"
export default {
    data() {
        return {
            order_id: "",//订单号
            //请求的订单详情
            orderDetail: {
                //数据初始化
                orderDetail: [
                    {
                        productName: "",
                        description: "",
                        quantity: "",
                    },
                ],
            },
            payUrlRes: {}, //请求获取的支付结果
            payUrl: "", //支付地址
            qrLoading: false
        };
    },
    computed: {

    },
    created() {
        // this.qrLoading = true
        let { order_id } = this.$route.query;
        this.order_id = order_id;
        //3.如果用户刷新了当前页面,本次交易取消,我们需要让用户重新提交交易
        if (!this.order_id) {
            //没有订单id 有可能用户刷新了页面
            //提示:本次交易取消,返回到预支付页面
            this.$alert("本次交易取消,请重新提交", "提示", {
                confirmButtonText: "确定",
                callback: (action) => {
                    this.$router.push({ path: "/preorder" })
                },
            });

            return;
        }
        //1.根据订单id 请求订单详情
        //2.根据订单id 获取微信支付地址,=>我们获取地址之后,生成二维码

        //并发请求 一次发送多个请求 Promise.all([promise1,promise2])

        Promise.all([api.getOrderDetail(this.order_id), api.pay(this.order_id)])
            .then(res => {
                console.log(res, 99444)
                this.orderDetail = res[0].data.data;
                let paymentRes = res[1].data;
                if (paymentRes.state) {
                    //获取支付地址
                    let payUrl = paymentRes.code_url;

                    //生成二维码

                    qr.toDataURL(payUrl, (err, img) => {
                        console.log(img)
                        this.payUrl = img;
                        //关闭加载动画
                        // this.qrLoading = false
                    })
                }
            })

        //轮询 查询支付状态
        //轮询的时候,一定要设置时间
        //设置200ms

        this.queryPayStatusInterval = setInterval(() => {
            api.queryPayStatusApi(this.order_id)
                .then(res => {
                    console.log(res, 9959595)
                    if (res.data.state) {
                        //跳转到支付成功这个页面
                        this.$router.push({ path: "/payment/paysuccess" })
                    }
                    // else {
                    // 	this.$router.push({ path: "/vipmanager/charge" })
                    // }
                })
        }, 2000)
    },
    beforeDestroy() {
        //组件即将销毁的时候
        //清除定时器
        clearInterval(this.queryPayStatusInterval)
    },
};
</script>

<style scoped lang="less">
.payment {
    background-color: #fff;
    padding: 5px 30px;
    box-shadow: 0 6px 32px rgb(0 0 0 / 13%);
}

.main {
    display: flex;
    justify-content: center;
}

.top {
    padding: 5px 5px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;

    .total_fee {
        margin-top: 10px;
    }
}

.title {
    margin: 10px 20px;

    b {
        font-size: 30px;
        display: inline-block;
        margin-right: 135px;
    }

    :deep(.icon) {
        vertical-align: text-bottom;
        width: 2em;
        height: 2em;
        margin-right: 10px;
    }
}

.pw-box-ft {
    height: 44px;
    padding: 8px 0 8px;
    background-image: linear-gradient(135deg, #4c67ff, #5635df);
    display: flex;

    justify-content: space-evenly;

    .qr-right {
        p {
            margin: 0;
            font-size: 14px;
            line-height: 22px;
            color: #fff;
            font-weight: 700;
        }
    }

    .icon {

        width: 3em;
        height: 3em;
    }
}




.right {
    width: 379px;
    height: 421px;
    padding-left: 50px;
    margin-top: -20px;
    background: url(../../../../assets/phone.png) 50px 0 no-repeat;
}
</style>